<template>
	<view class="content">
		<view>
			<span class="jisuan-width" :style="{display}">{{data.description}}</span>
			<view class="wrap">
				<view class="img-warp">
					<image class="img" :src="data.cover"></image>
				</view>
				<view class="text-wrap">
					<text class="name">{{data.name}}</text><br/>
				</view>
			</view>
			<view class="address-wrap" style="justify-content: space-between">
				<view class="address-left">
					<view style="width: 34upx;">
						<view class="iconfont" style="margin-top:-4upx;font-size:40upx;color: rgba(155, 155, 155, 1)">&#xe622;</view>
					</view>
					<view class="address">{{data.address}}</view>
				</view>
				<view class="address" @click="goMap" v-if="data.distance">
					{{data.distance}}km
					<text class="iconfont" style="font-size:30upx;color: rgba(155, 155, 155, 1);">&#xe60e;</text>
				</view>
			</view>
			<view class="address-wrap">
				<view style="width: 34upx;">
					<view class="iconfont" style="margin-top:-4upx;font-size:40upx;color: rgba(155, 155, 155, 1)">&#xe6ca;</view>
				</view>
				<view class="address">{{data.manager.name}}</view>
			</view>
			<view class="address-wrap">
				<view style="width: 34upx;">
					<view class="iconfont" style="margin-top:-4upx;font-size:40upx;color: rgba(155, 155, 155, 1)">&#xe609;</view>
				</view>
				<view class="remark" v-if="!more" style="">{{data.description}}</view>
				<view class="more" v-else style="">{{data.description}}</view>

				<!--				<span>...-->
<!--					<span class="iconfont" style="font-size:40upx;color: rgba(155, 155, 155, 1)">&#xe6ca;</span>-->
<!--				</span>-->
			</view>
			<view @click="more=true" v-if="!more"  style="background:white;width:118upx;position:absolute;margin-top:-40upx;margin-left:calc(100% - 148upx);
			font-size:28upx;z-index: 10000;color: rgba(155, 155, 155, 1);">...更多
				<text class="iconfont" style="font-size:28upx;color: rgba(155, 155, 155, 1)">&#xe601;</text>
			</view>
		</view>
		<view class="save" @click="goSave()">
			<view class="address-wrap" style="justify-content: space-between">
				<view class="address-left">
					<view style="width: 80upx;">
						<image class="img" style="margin-top:4upx;width:48upx;height: 48upx;border-radius:0"
							   src="/static/img/save.png"></image>
					</view>
					<view style="line-height: 60upx">缴存诚意金</view>
				</view>
				<view class="address" style="line-height: 60upx">{{data.sincer}}&nbsp;&nbsp;
					<text class="iconfont" style="font-size:30upx;color: rgba(155, 155, 155, 1);">&#xe60e;</text>
				</view>
			</view>
		</view>
		<view class="album-wrap" style="margin-top: 40upx" v-for="item in data.albums">
			<view class="album-name">{{item.name}}</view>
			<view style="width:100%;padding: 0 30upx;display: flex;flex-wrap: wrap;justify-content: space-between">
				<image class="album-img" v-for="i in item.pictures" @click="showImg(i,item.pictures)"
					:style="{width:(width-30)*0.3066+'px',height:(width-30)*0.3066+'px'}"   mode="scaleToFill" :src="i"></image>
				<view v-if="item.pictures.length%3==2"
					  :style="{width:(width-30)*0.3066+'px',height:(width-30)*0.3066+'px'}"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import API from '../../common/api.js';
	import UTIL from '../../common/util.js';
	// import analyze from 'rgbaster';
	import img from '../../static/logo.png'
	export default {
		components: {
		},
		data() {
			return {
				more:true,
				width: uni.getSystemInfoSync().windowWidth,
				display:'',
				id:0,
				data:{}
			}
		},
		onLoad(option) {
			// RGBaster.colors(img, {
			// 	success: function(payload) {
			//
			// 		console.log(payload.dominant);
			// 		console.log(payload.secondary);
			// 		console.log(payload.palette);
			// 	}
			// });
				this.getCo()
			this.id=option.id
			this.getData()
		},

		onPullDownRefresh(){
			this.getData(true)
		},
		methods: {
			async getCo(){
// 				let i =uni. ()
//
// 				const result = analyze(i,img)
// 				console.log(result,'wwww')
			},
			goMap(){
				uni.openLocation({latitude:this.data.latitude,longitude:this.data.longitude,name:this.data.address})
			},
			goSave(){
				if(uni.getStorageSync('token')){
					if(uni.getStorageSync('data')){
						uni.navigateTo({
							url: `../account/save?id=${this.data.id}&name=${this.data.name}&sincerStartTime=
					${this.data.sincerStartTime}&sincerEndTime=${this.data.sincerEndTime}&sincerThawTime=${this.data.sincerThawTime}`
						});
					}else{
						uni.navigateTo({
							url: '../account/index'
						});
					}
				}else{
					uni.navigateTo({
						url: '../index/accredit'
					});
				}
			},
			async getData(flag){
				uni.showLoading()
				let json = await API.buildingDetail({
					"targetId": this.id,
					token:'token'
				});
				if(json.status==200){
					this.data=json.data
					this.data.openTime=new Date(this.data.openTime * 1000).format('yyyy-MM-dd')
					let location=(uni.getStorageSync('location')?JSON.parse(uni.getStorageSync('location')):null);
					if(location){
						this.data.distance=UTIL.distance(location,this.data.latitude,this.data.longitude)
					}
					setTimeout(()=>{
						const query = wx.createSelectorQuery();
						query.select('.jisuan-width').boundingClientRect()
						query.selectViewport().scrollOffset()
						query.exec(res=>{
							console.log((this.width-66),45415415)
							this.display='none'
							if((this.width-66)*3<res[0].width){
								this.more=false
							}
						})
					},100)
				}else{
					if(flag){
						uni.showModal({
							title: '提示',
							content: '加载失败，请下拉刷新重试',
							showCancel: false,
						});
					}
				}
				let jsons = await API.buildPromotionList({
					buildingId:this.id,
					limit: 100000,
					page: 0,
					enable:1
				});
				if(jsons.status==200){
					this.activitys=jsons.data
				}else{
					if(flag){
						uni.showModal({
							title: '提示',
							content: '加载失败，请下拉刷新重试',
							showCancel: false,
						});
					}
				}
				uni.stopPullDownRefresh()
				uni.hideLoading()
			},
			showImg(url,data){
				let w=url.replace('http://','https://')
				let d=[]
				data.map(r=>{
					d.push(r.replace('http://','https://'))
				})
				console.log(w,d)
				uni.previewImage({
					current:w, // 当前显示图片的http链接
					urls:d // 需要预览的图片http链接列表

				})
			}
		}
	}
</script>

<style scoped>

	.content {
	}
	.jisuan-width{
		color: white;;
		font-size: 28upx;
		white-space:nowrap
	}
	.wrap{
		padding:40upx 30upx 20upx 30upx;
		display: flex;
	}
	.img-warp{
		width: 104upx;
		height: 104upx;
		margin-right: 20upx;
	}
	.img{
		width: 100%;
		height: 100%;
		border-radius: 200upx;
	}
	.text-wrap{
		width:calc(100% - 124upx);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-bottom: 20upx;
		line-height: 104upx;
	}
	.name{
		color: rgba(0, 0, 0, 1);
		font-size: 36upx;
		font-family: PingFangSC-regular;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.address-wrap{
		display: flex;
		padding:20upx 30upx 0 30upx;
	}
	.address-left{
		display: flex;
		width: calc(100% - 220upx);
	}
	.address{
		color: rgba(155, 155, 155, 1);
		font-size: 28upx;
		line-height: 40upx;
		padding-left: 30upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.remark{
		color: rgba(155, 155, 155, 1);
		font-size: 28upx;
		line-height: 40upx;
		padding-left: 30upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.more{
		color: rgba(155, 155, 155, 1);
		font-size: 28upx;
		line-height: 40upx;
		padding-left: 30upx;
	}
	.save{
		width: calc(100% - 60upx);
		margin:60upx 0 70upx 30upx;
		height: 110upx;
		border-radius: 12upx;
		padding-top: 16upx;
		box-shadow: 0px 0px 11px 0px rgba(213, 213, 213, 1);
	}
	.album-wrap{
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 60upx;
	}
	.album-name{
		color: rgba(155, 155, 155, 1);
		font-size: 30upx;
		width: 100%;
		padding-left: 30upx;
	}
	.album-img{
		margin-top:20upx;
		border-radius: 12upx;
	}
</style>
